<template>
  <div class="about">
    <textarea cols="30" rows="10" style="width: 100%" v-model="value" ref="textarea"></textarea>
    <p style="display: flex; justify-content: flex-end;">
      <button @click="handlePublic">发表</button>
    </p>

    <h2>热门跟帖</h2>
    <div class="list">
      <Message v-for="(v, i) in messageList" :key="i" :v="v" @resolve="resolve"></Message>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Message from '@/components/message/index.vue'
import { computed, onMounted, ref } from 'vue';
import { useStore } from 'vuex'
import { Toast } from 'vant';
const store = useStore();
const messageList = computed(() => store.state.messageList)
const value = ref('')
const textarea = ref()
const isPublic = ref(true)

const resolve = () => {
  textarea.value.focus();
  document.documentElement.scrollTop = 0
  isPublic.value = false
}
const handlePublic = () => {
  if (isPublic.value) {
    store.dispatch('addMessageList', { content: value.value, name: '游客' }).then(resp => {
      Toast({
        duration: 3000,
        message: '评论已提交'
      })
    })
  } else {
    isPublic.value = true
     Toast({
        duration: 3000,
        message: '回复已提交'
      })
  }

}

onMounted(() => {
  store.dispatch('fetchMessageList')
})
</script>
